<!DOCTYPE html>
<html>
    <head>
        <title>API</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style> 
        <script src="../../../../lib/core/ht.js"></script> 
        <script src="../../../../lib/plugin/ht-modeling.js"></script> 
        <script src="../../../../lib/plugin/ht-form.js"></script> 
        <script>          
            
            ht.Default.setImage('image1', '');
            ht.Default.setImage('image2', '');
            ht.Default.setImage('image3', '');
            ht.Default.setImage('image4', '');
            
            function init(){                                 
                dataModel = new ht.DataModel();                
                formPane = new ht.widget.FormPane();                                                                                                 
                g3d = new ht.graph3d.Graph3dView(dataModel);                          
                mainSplit = new ht.widget.SplitView(g3d, formPane, 'h', 0.7);   
                
                view = mainSplit.getView();  
                view.className = 'main';
                document.body.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    mainSplit.invalidate();
                }, false);                         
                                
                g3d.setGridVisible(true); 
                g3d.setEye([460, 620, 700]);  
                g3d.getView().style.background = '#F9F9F9';                              
    
                initFormPane();
                initModel();
                updateModel();
            }

            function updateModel(){
                var D = ht.Default,
                    top = formPane.v('top'),
                    bottom = formPane.v('bottom'),
                    from = formPane.v('from'),
                    to = formPane.v('to'),
                    side = formPane.v('side'),
                    sideFrom = formPane.v('sideFrom'),
                    sideTo = formPane.v('sideTo'),
                    resolution = formPane.v('resolution'),
                    torusRadius = formPane.v('torus.radius'),   
                    hResolution = formPane.v('hResolution'), 
                    vResolution = formPane.v('vResolution'), 
                    hStart = formPane.v('hStart'), 
                    hArc = formPane.v('hArc'), 
                    vStart = formPane.v('vStart'), 
                    vArc = formPane.v('vArc');
                    
                D.setShape3dModel('Custom-Box', D.createBoxModel());
                D.setShape3dModel('Custom-Rect', D.createRectModel(top, bottom));
                D.setShape3dModel('Custom-RoundRect', D.createRoundRectModel(top, bottom));
                D.setShape3dModel('Custom-Star', D.createStarModel(top, bottom));
                D.setShape3dModel('Custom-Triangle', D.createTriangleModel(top, bottom));
                D.setShape3dModel('Custom-RightTriangle', D.createRightTriangleModel(top, bottom));
                D.setShape3dModel('Custom-Parallelogram', D.createParallelogramModel(top, bottom));
                D.setShape3dModel('Custom-Trapezoid', D.createTrapezoidModel(top, bottom));                
                D.setShape3dModel('Custom-Heart', D.createExtrusionModel([
                    0, -0.32, 
                    0.70, -0.75, 
                    0.52, 0.23,
                    0, 0.42,                                                                          
                    -0.47, 0.28, 
                    -0.70, -0.75,
                    0, -0.32
                ], [1, 4, 4], top, bottom, resolution));                                
                
                D.setShape3dModel('Custom-Side-Sphere', D.createSphereModel(side, sideFrom, sideTo, from, to, resolution));                
                D.setShape3dModel('Custom-Side-Cylinder', D.createCylinderModel(side, sideFrom, sideTo, from, to, top, bottom));
                D.setShape3dModel('Custom-Side-Cone', D.createConeModel(side, sideFrom, sideTo, from, to, bottom));
                D.setShape3dModel('Custom-Side-Torus', D.createTorusModel(side, sideFrom, sideTo, from, to, torusRadius, resolution));                
                D.setShape3dModel('Custom-Side-Pot', D.createRingModel([
                    0.48, 0.45, 
                    0.21, 0.10, 
                    0.51, -0.19,
                    0.23, -0.45,                                                                          
                    0.14, -0.41, 
                    0.17, 0.39,
                    0.48, 0.45
                ], [1, 4, 4], resolution, top, bottom, side, sideFrom, sideTo, from, to));
                
                
                D.setShape3dModel('Custom-Smooth-Sphere', D.createSmoothSphereModel(hResolution, vResolution, hStart, hArc, vStart, vArc));
                D.setShape3dModel('Custom-Smooth-Cylinder', D.createSmoothCylinderModel(hResolution, top, bottom, formPane.v('top.radius'), formPane.v('bottom.radius'), hStart, hArc));
                D.setShape3dModel('Custom-Smooth-Cone', D.createSmoothConeModel(bottom, hResolution, hStart, hArc));
                D.setShape3dModel('Custom-Smooth-Torus', D.createSmoothTorusModel(
                        formPane.v('smooth.torus.radius'), 
                        formPane.v('smooth.tube.radius'), hResolution, vResolution, hStart, hArc));                           
                D.setShape3dModel('Custom-Smooth-Pot', D.createSmoothRingModel([
                    0.48, 0.45, 
                    0.21, 0.10, 
                    0.51, -0.19,
                    0.23, -0.45,                                                                          
                    0.14, -0.41, 
                    0.17, 0.39,
                    0.48, 0.45
                ], [1, 4, 4], vResolution, hStart, hArc, hResolution));        
        
                dataModel.each(function(data){
                    data.s({
                        'shape3d.image': formPane.v('image'),
                        'shape3d.top.image': formPane.v('topImage'),
                        'shape3d.bottom.image': formPane.v('bottomImage'),
                        'shape3d.from.image': formPane.v('fromImage'),
                        'shape3d.to.image': formPane.v('toImage')
                    });
                });
                
                g3d.invalidateAll();
            }
            
            function initModel(){
                var array = ['Box', 'Rect', 'RoundRect', 'Star', 'Triangle', 'RightTriangle', 'Parallelogram', 'Trapezoid', 'Heart'];
                for(var i=0; i<array.length; i++){
                    createNode('Custom-' + array[i], -500+i*100, -200); 
                }
                
                array = ['Sphere', 'Cylinder', 'Cone', 'Torus', 'Pot'];
                
                for(var i=0; i<array.length; i++){
                    createNode('Custom-Side-' + array[i], -400+i*150, 0); 
                }
                
                for(var i=0; i<array.length; i++){
                    createNode('Custom-Smooth-' + array[i], -400+i*150, 200); 
                }                                
            }
            
            function createNode(shape3d, x, z){
                var node = new ht.Node();                
                node.s3(80, 80, 80);
                node.p3(x, 40, z);
                node.s({
                    'shape3d': shape3d,
                    'wf.visible': 'selected'
                });
                dataModel.add(node);
                return node;
            }
            
            function initFormPane(){
                leftWidth = 90;
                
                formPane.addRow([{ element: 'Common:', font: 'bold 12px arial, sans-serif' }], [0.1]);
                formPane.addRow([], [0.1], 1.01, {background: '#43AFF1'});
                formPane.addRow([
                    {
                        id: 'top',
                        checkBox: {
                            label: 'top',
                            onValueChanged: function(){ updateModel(); }
                        }
                    },
                    {
                        id: 'bottom',
                        checkBox: {
                            label: 'bottom',
                            onValueChanged: function(){ updateModel(); }
                        }        
                    },
                    {
                        id: 'from',
                        checkBox: {
                            label: 'from',
                            onValueChanged: function(){ updateModel(); }
                        }
                    },
                    {
                        id: 'to',
                        checkBox: {
                            label: 'to',
                            onValueChanged: function(){ updateModel(); }
                        }        
                    }                    
                ], [0.1, 0.1, 0.1, 0.1]);  
                
                formPane.addRow(['image',
                    {      
                        id: 'image',
                        comboBox: {                            
                            values: [null, 'image1', 'image2', 'image3', 'image4'], 
                            value: 'image3',
                            onValueChanged: function(){ updateModel(); }
                        }                        
                    }
                ], [leftWidth, 0.1]);                
                formPane.addRow(['topImage',
                    {      
                        id: 'topImage',
                        comboBox: {                            
                            values: [null, 'image1', 'image2', 'image3', 'image4'],                            
                            onValueChanged: function(){ updateModel(); }
                        }                        
                    }
                ], [leftWidth, 0.1]);    
                formPane.addRow(['bottomImage',
                    {                   
                        id: 'bottomImage',
                        comboBox: {                            
                            values: [null, 'image1', 'image2', 'image3', 'image4'],                            
                            onValueChanged: function(){ updateModel(); }
                        }                        
                    }
                ], [leftWidth, 0.1]);  
                formPane.addRow(['fromImage',
                    {      
                        id: 'fromImage',
                        comboBox: {                            
                            values: [null, 'image1', 'image2', 'image3', 'image4'],                            
                            onValueChanged: function(){ updateModel(); }
                        }                        
                    }
                ], [leftWidth, 0.1]);    
                formPane.addRow(['toImage',
                    {                   
                        id: 'toImage',
                        comboBox: {                            
                            values: [null, 'image1', 'image2', 'image3', 'image4'],                            
                            onValueChanged: function(){ updateModel(); }
                        }                        
                    }
                ], [leftWidth, 0.1]);                 
                
                formPane.addRow([{ element: 'Side:', font: 'bold 12px arial, sans-serif' }], [0.1]);
                formPane.addRow([], [0.1], 1.01, {background: '#43AFF1'});                
                
                formPane.addRow(['side', 
                    {
                        id: 'side',
                        slider: {                    
                            min: 0,
                            max: 50,
                            step: 1,
                            value: 50,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]); 
                
                formPane.addRow(['sideFrom', 
                    {
                        id: 'sideFrom',
                        slider: {                    
                            min: 0,
                            max: 50,
                            step: 1,
                            value: 0,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]); 
                
                formPane.addRow(['sideTo', 
                    {
                        id: 'sideTo',
                        slider: {                    
                            min: 0,
                            max: 50,
                            step: 1,
                            value: 35,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);   
                
                formPane.addRow(['resolution', 
                    {
                        id: 'resolution',
                        slider: {                    
                            min: 0,
                            max: 30,
                            step: 1,
                            value: 15,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);   
                
                formPane.addRow(['torus.radius', 
                    {
                        id: 'torus.radius',
                        slider: {                    
                            min: 0,
                            max: 0.25,                            
                            value: 0.17,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);    
                
                formPane.addRow([{ element: 'Smooth:', font: 'bold 12px arial, sans-serif' }], [0.1]);
                formPane.addRow([], [0.1], 1.01, {background: '#43AFF1'});                  
               
                formPane.addRow(['hResolution', 
                    {
                        id: 'hResolution',
                        slider: {                    
                            min: 0,
                            max: 20,
                            step: 1,
                            value: 10,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);                               
                formPane.addRow(['vResolution', 
                    {
                        id: 'vResolution',
                        slider: {                    
                            min: 0,
                            max: 20,
                            step: 1,
                            value: 10,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);                               
                formPane.addRow(['hStart', 
                    {
                        id: 'hStart',
                        slider: {                    
                            min: 0,
                            max: Math.PI*2,
                            value: 0,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);  
                formPane.addRow(['hArc', 
                    {
                        id: 'hArc',
                        slider: {                    
                            min: 0,
                            max: Math.PI*2,
                            value: Math.PI*2,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);                
                formPane.addRow(['vStart', 
                    {
                        id: 'vStart',
                        slider: {                    
                            min: 0,
                            max: Math.PI*2,
                            value: 0,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);  
                formPane.addRow(['vArc', 
                    {
                        id: 'vArc',
                        slider: {                    
                            min: 0,
                            max: Math.PI,
                            value: Math.PI,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);    
                formPane.addRow(['top.radius', 
                    {
                        id: 'top.radius',
                        slider: {                    
                            min: 0,
                            max: 0.5,                            
                            value: 0.5,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);                
                formPane.addRow(['bottom.radius', 
                    {
                        id: 'bottom.radius',
                        slider: {                    
                            min: 0,
                            max: 0.5,                            
                            value: 0.5,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);         
                
                formPane.addRow(['torus.radius', 
                    {
                        id: 'smooth.torus.radius',
                        slider: {                    
                            min: 0,
                            max: 0.5,                            
                            value: 0.33,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);                   
                formPane.addRow(['tube.radius', 
                    {
                        id: 'smooth.tube.radius',
                        slider: {                    
                            min: 0,
                            max: 0.5,                            
                            value: 0.17,
                            onValueChanged: function(){ updateModel(); }
                        }
                    }
                ], [leftWidth, 0.1]);                 

            }
       
        </script>
    </head>
    <body onload="init();">                                
    </body>
</html>
